<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport"
        content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta content="telephone=no" name="format-detection" />
    <!-- 留作将来统一添加 -->
    <TEMPLATE>${TEMPLATE}</TEMPLATE>
    <title>模板html</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/index.css">
    <link rel="stylesheet" type="text/css" href="../../css/data-flex.min.css">
    <link rel="stylesheet" type="text/css" href="../../css/swiper.min.css">
    <style type="text/css">
        body {
            background: #5AC2FF;
            height: 100vh;
            overflow: hidden;
        }

        .vueApp {
            height: 100vh;
            overflow: hidden;
        }

        .layer-1 {
            z-index: 10;
            position: absolute;
            top: 25px;
            left: 50px;
            right: 50px;
            height: 455px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 10px;
        }

        .layer-2 {
            z-index: 20;
            position: absolute;
            top: 29px;
            left: 38px;
            right: 38px;
            height: 455px;
            background-color: rgba(255, 255, 255, 0.6);
            border-radius: 10px;
        }

        .layer-3 {
            z-index: 30;
            position: absolute;
            top: 36px;
            left: 27px;
            right: 27px;
            height: 455px;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 10px;
        }

        .layer-4 {
            z-index: 40;
            position: relative;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 1);
            border-radius: 10px;
            padding: 20px;
            overflow-x: hidden;
            overflow-y: scroll;
            text-align: center;
        }

        .content {
            overflow-y: scroll;
            width: fit-content;
            height: 100%;
            font-size: 18px;
            font-weight: 500;
            color: #222224;
            line-height: 21px;
            word-break: all;
            margin: 0 auto;
        }

        .icon-audio {
            display: inline-block;
            width: 15px;
            min-width: 15px;
            height: 17px;
            margin-left: 10px;
            vertical-align: middle;
        }

        .popup {
            z-index: 50;
            position: fixed;
            left: 0;
            width: 100%;
            height: 360px;
            background: #fff;
            box-shadow: 0px -1px 8px 0px rgba(30, 34, 39, 0.06);
            border-radius: 40px 40px 0px 0px;
            transition: bottom 0.3s;
        }

        .open {
            bottom: 0;
        }

        .close {
            bottom: -300px;
        }

        .popup-header {
            height: 60px;
        }

        .icon-arrow {
            display: block;
            width: 15px;
            height: 15px;
            margin: 0 auto;
        }

        .arrow-text {
            margin-top: 6px;
            font-size: 13px;
            font-weight: 400;
            color: #808080;
            text-align: center;
        }

        .popup-body {
            height: 300px;
            padding: 0 15px;
            overflow-y: scroll;
        }

        .popup-item {
            padding: 15px 15px 15px 0;
            margin-bottom: 15px;
            background-color: #F3F3F3;
            border-radius: 4px;
            font-size: 14px;
            line-height: 18px;
            color: #222224;
        }

        .popup-active {
            padding: 15px 15px 15px 0;
            margin-bottom: 15px;
            border-radius: 4px;
            font-size: 14px;
            line-height: 18px;
            background-color: rgba(0, 204, 131, 0.2);
            color: rgba(0, 204, 131, 1);
        }

        .popup-error {
            padding: 15px 15px 15px 0;
            margin-bottom: 15px;
            border-radius: 4px;
            font-size: 14px;
            background-color: rgba(255, 247, 226, 0.2);
            color: rgba(255, 247, 226, 1);
        }

        .alphabet {
            font-size: 18px;
            font-weight: 600;
            margin: 0 10px;
            line-height: 18px;
            min-width: fit-content;
        }


        .icon-audio {
            display: inline-block;
            width: 15px;
            min-width: 15px;
            height: 17px;
            margin-left: 10px;
            vertical-align: middle;
        }

        .img-cover {
            max-height: 200px;
            object-fit: contain;
            margin: 10px auto 0 auto;
            border-radius: 5px;
        }

        .icon-record {
            width: 55px;
            height: 55px;
            margin: 20px auto 0 auto;
        }

        .text-black {
            font-size: 13px;
            color: #191919;
            text-align: center;
        }

        .box-btns {
            margin: 20px auto 0 auto;
        }

        .btns-item {
            margin: 0 40px;
        }

        .icon-play {
            display: block;
            width: 41px;
            height: 40px;
            margin: 0 auto;
        }

        .text-score {
            margin-bottom: 3.5px;
            font-size: 25px;
            font-weight: 600;
            color: #FD9B43;
            text-align: center;
        }

        .text {
            font-size: 20px;
            font-weight: 500;
            color: #222224;
            line-height: 21px;
            word-break: all;
        }

        .icon-audio {
            display: inline-block;
            width: 15px;
            min-width: 15px;
            height: 17px;
            margin-left: 10px;
            vertical-align: middle;
        }

        .box-grid {
            display: inline-grid;
            margin: 20px auto 0 auto;
            grid-template-columns: 120px 120px;
            grid-row-gap: 25px;
            grid-column-gap: 25px;
        }

        .item {
            border: 5px solid transparent;
            border-radius: 10px;
        }

        .box-grid img {
            border-radius: 5px;
        }

        .correct {
            border: 5px solid #00C286;
        }

        .error {
            border: 5px solid #FF5656;
        }

        .swiper-container,
        .sswiper-srapper,
        .swiper-slide {
            width: 100vw;
            height: 100vh;
        }

        .swiper-slide {
            padding: 45px 15px 40px 15px;
        }

        .index {
            z-index: 999;
            position: absolute;
            left: 50%;
            top: 0;
            width: 58px;
            height: 20px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 15px;
            margin-left: -29px;
            font-size: 13px;
            font-weight: 400;
            color: #FFFFFF;
        }

        .image {
            display: block;
            width: 280px;
            height: auto;
            margin: 104px auto 0 auto;
        }

        .score {
            margin-top: 70px;
            color: #FFFFFF;
            font-size: 13px;
        }

        .dot {
            width: 6px;
            height: 6px;
            background: #FD9B43;
            border-radius: 3px;
        }

        .icon-switch {
            width: 22px;
            height: 22px;
        }

        .controls {
            margin-top: 20px;
        }

        .controls .item {
            margin: 0 25px;
            color: #fff;
            font-size: 15px;
            text-align: center;
        }

        .icon-controls {
            display: block;
            width: 69px;
            height: 69px;
            margin: 0 auto;
        }

        .arrow {
            z-index: 999;
            position: absolute;
            top: 50%;
            width: 24px;
            height: 24px;
            margin-top: -14px;
        }

        .left {
            left: 13px;
        }

        .right {
            right: 13px;
        }
        .text-title * {
            font-size: 18px;
            word-break: keep-all !important;
            word-wrap: break-word !important;
            -webkit-hyphens: none !important;
        }

        .content * {
            word-break: keep-all !important;
            word-wrap: break-word !important;
            -webkit-hyphens: none !important;
            text-align: left !important;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="index" data-flex="cross:center main:center">{{wordIndex+1}}/{{listData.length}}</div>
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide" v-for="item,index in listData">
                    <div class="layer-1"></div>
                    <div class="layer-2"></div>
                    <div class="layer-3"></div>
                    <div class="layer-4" data-flex="cross:center main:center">
                        <div v-if="typeCode == 52">
                            <div class="text-title">
                                <span :class="'words-box-'+ index">{{item.questionName}}</span>
                                <img @click="handlePlayWord(index, 2)" :src="item.playType == 2 && isPlay ? '../../image/ui/play.gif' : '../../image/ui/audio.png'"
                                    alt="" class="icon-audio">
                            </div>
                            <img v-if="item.questionPicUrl" :src="item.questionPicUrl"
                                alt="" class="img-cover cacheImg" :cacheurl="item.questionPicUrl">
                            <div @click="handleRecordWord(index)">
                                <img :src="isRecord ? '../../image/course/word_record.gif' : '../../image/ui/record.png'" alt="" class="icon-record">
                                <div class="text-black" style="margin-top: 10px;">录音</div>
                            </div>
                            <div class="box-btns" data-flex="main:center">
                                <div class="btns-item" @click="handlePlayWord(index, 1)">
                                    <img :src="item.playType == 1 && isPlay ? '../../image/course/pause.png' : '../../image/course/play2.png'" alt="" class="icon-play">
                                    <div class="text-black">录音播放</div>
                                </div>
                                <div class="btns-item">
                                    <div class="text-score">{{item.score || 0}}</div>
                                    <div class="text-black">得分</div>
                                </div>
                            </div>
                        </div>
                        <div v-else-if="typeCode == 53">
                            <div data-flex="main:center cross:center" style="flex-wrap: wrap;">
                                <div class="text">{{ item.questionName }}</div>
                                <img v-if="item.questionAudioUrl" @click="handlePlayWord(wordIndex, 2)" :src="item.playType == 2 && isPlay ? '../../image/ui/play.gif' : '../../image/ui/audio.png'" alt="" class="icon-audio">
                            </div>
                            <img v-if="item.questionPicUrl" :src="item.questionPicUrl" class="img-cover cacheImg"  :cacheurl="item.questionPicUrl" alt="">
                            <div class="box-grid">
                                <div class="item" @click="handleJudge(index)" v-for="_item,index in item.optionList" :class="{'correct': item.sel === index}">
                                    <img :src="_item.optionContent" alt="">
                                </div>
                            </div>
                        </div>
                        <div v-else-if="typeCode == 54">
                            <div class="content" v-html="item.questionWord"></div>
                            <img v-if="item.questionAudioUrl" @click="handlePlayWord(wordIndex, 2)" :src="item.playType == 2 && isPlay ? '../../image/ui/play.gif' : '../../image/ui/audio.png'" alt="" class="icon-audio">
                            <img v-if="item.questionPicUrl" :src="item.questionPicUrl" class="img-cover cacheImg"  :cacheurl="item.questionPicUrl" alt="">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="popup" :class="isOpen ? 'open' : 'close'" v-if="typeCode == 54 && listData.length">
            <div class="popup-header" data-flex="main:center cross:center">
                <div @click="isOpen = !isOpen">
                    <img v-show="isOpen" src="../../image/ui/ad_gray.png" alt="" class="icon-arrow">
                    <img v-show="!isOpen" src="../../image/ui/at_gray.png" alt="" class="icon-arrow">
                    <div class="arrow-text">选择答案</div>
                </div>
            </div>
            <div class="popup-body">
                <div :class="listData[wordIndex].sel === index ? 'popup-active' : 'popup-item'" @click="handleJudge(index)"
                    v-for="item,index in listData[wordIndex].optionList" data-flex>
                    <div class="alphabet">{{alphabet[index]}}.</div>
                    <div v-if="item.optionContentType == 2">
                        <img :src="item.optionContent" alt="">
                    </div>
                    <div data-flex-box="1" v-else>{{ item.optionContent }}</div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-logic.js"></script>
<script type="text/javascript" src="../../script/jquery.min.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/swiper.min.js"></script>
<script type="text/javascript" src="../../script/audio.js"></script>
<script type="text/javascript" src="../../script/recordScore.js"></script>
<script type="text/javascript" src="../../script/question/data_parse.js"></script>
<script type="text/javascript" src="../../script/saveFiles.js"></script>
<script type="text/javascript">
    // html 的引号一律为双引号(""),js 为单引号('')
    var USER, $S, vm, pageParam, playIndex = -1;
    var isPlayAudio = true;
    apiready = function () {
        $S = SERVICE();
        USER = USER();
        console.log(JSON.stringify(api.pageParam) + '=====pageParam');
        pageParam = api.pageParam;
        fnInit();
        // 初始化播放器
        Audio.init();
        addAudioEvent();
        if(pageParam.typeCode == 52) {
            // 初始化保存
            initSaveFile();
            // 初始化录音引擎
            initEngine();
            // 页面消失，停止录音
            api.addEventListener({
                name: 'viewdisappear'
            }, function (ret, err) {
                // 停止录音
                fnStopRecord();
                // 停止播放
                Audio.pause();
                // 移除监听事件
                Audio.removeEventListener();
                playIndex = -1;
                vm.isPlay = false;
            });
        }
        // 返回继续答题
        api.addEventListener({
            name: 'back-to-answer'
        }, function() {
            if(vm.isRecord) {
                // 停止录音
                fnStopRecord();
            }
            if(vm.isPlay) {
                // 停止播放
                Audio.pause();
                playIndex = -1;
            }
            if(vm.typeCode == 52) {
                vm.isRecord = false;
                vm.listData[vm.wordIndex].isRecord = false;
            }
            if(isPlayAudio) {
                handlePlayWord(vm.wordIndex, 2);
            }else {
                isPlayAudio = true;
            }
        });
    };

    // 初始化
    function fnInit() {

        vm = new Vue({
            el: '.vueApp',
            data: {
                // 好
                great: 70,
                // 一般
                notBad: 30,
                // 差
                bad: 0,
                // 52 跟读 53 单词题 54 阅读理解
                typeCode: pageParam.typeCode,
                // 目录 id
                catalogId: pageParam.catalogId,
                // 当前索引
                wordIndex: 0,
                // 是否弹出选择框
                isOpen: false,
                // 选项 A-Z
                alphabet: "ABCDEFGHIJKLMNOPQRSTUVWXYZ",
                // 选择题当前选中
                selIndex: -1,
                // 数据列表
                listData: [],
                // 答题计时
                time: 0,
                // swiper 实例
                mySwiper: null,
                // 是否开始录音
                isRecord: false,
                // 是否播放音频
                isPlay: false
            },
            methods: {
                initSwiper: function() {
                    this.mySwiper = new Swiper('.swiper-container', {
                        autoplay: false,
                        loop: false,
                        on: {
                            slideChangeTransitionEnd: function() {
                                if(vm.isRecord) {
                                    // 停止录音
                                    fnStopRecord();
                                }
                                if(vm.isPlay) {
                                    // 停止播放
                                    Audio.pause();
                                    playIndex = -1;
                                }
                                vm.wordIndex = this.activeIndex;
                                if(vm.typeCode == 52) {
                                    vm.isRecord = false;
                                    vm.listData[vm.wordIndex].isRecord = false;
                                }
                                if(isPlayAudio) {
                                    handlePlayWord(vm.wordIndex, 2);
                                }else {
                                    isPlayAudio = true;
                                }
                            }
                        },
                    });
                }
            }
        });
        getData();
    }

    // 获取页面数据
    function getData() {
        var url = 'question/findQuestionList';
        var params = {
            id: pageParam.catalogId,
            questionTypeCode: pageParam.typeCode
        };
        var callback = function(data) {
            var listData = formateQAData(data.listData);
            if(vm.typeCode == 52) {
                for(var i = 0; i < listData.length; i ++) {
                    var item = listData[i];
                    // item.src = fileIsSave(item.id+'questionAudioUrl') || item.questionAudioUrl;
                    if(item.stuAnswerResultDetailId) {
                        var src = getIsSave(item.stuAnswerResultDetailId);
                        src = 'fs:/'+ (src || '');
                        item.recordUrl = src;
                        item.score = item.stuAnswerResultDetailScoreValue;
                    }
                }
            }
            vm.listData = listData;
            if(vm.listData.length > 0) {
                setTimeout(function() {
                    vm.initSwiper();
                    fnStartTiming();
                    handlePlayWord(0, 2);
                }, 100);
            }else {
                fnToast('暂时没有习题呦');
                setTimeout(function() {
                    api.closeWin();
                }, 1200)
            }
            vm.$nextTick(function() {
                fnCacheImgLocal();
            });
        };
        POST(url, params, callback);
    }

    // 选择选项
    function handleJudge(index) {
        var list = deepCopy(vm.listData),
            item = list[vm.wordIndex];
        item.sel = index;
        // $('.questionValue-0').val(getChar(index));
        vm.listData = list;
        submiteOne(vm.wordIndex);
    }

    // 转换时间格式
    function transfromTime(time) {
        var minute = parseInt(time / 60);
        var second = parseInt(time % 60);
        if (minute > 0) {
            return (minute > 9 ? minute : '0' + minute) + ':' + (second > 9 ? second : '0' + second);
        } else {
            return '00:' + (second > 9 ? second : '0' + second);
        }
    }

    // 开始计时
    function fnStartTiming() {
        vm.time++;
        var time = transfromTime(vm.time);
        api.execScript({
            name: api.winName,
            script: "fnSetBtnInfo('" + time + "')"
        });
        setTimeout(fnStartTiming, 1000);
    }

    // 录音动作
    function handleRecordWord(index) {
        var list = deepCopy(vm.listData),
            item = list[index];
        // 停止播放
        Audio.pause();
        playIndex = -1;
        vm.isPlay = false;
        if(vm.isRecord) {
            // 暂停录音
            fnStopRecord();
            vm.isRecord = false;
        }else {
            // 开始录音
            vm.isRecord = true;
            fnSentRecordIdentify(item.questionName, recordCallback);
            item.isRecord = true;
        }
        vm.listData = list;
    }

    // 录音完成回调
    function recordCallback(data) {
        var url = data.url, // 云端地址
            local = data.localPath, // 本地录音文件
            score = data.score; // 单词得分
            details = data.details; // 单词得分明细
        var list = deepCopy(vm.listData),
            item = list[vm.wordIndex];
        if(item.isRecord) {
            item.recordUrl = 'fs:/'+local;
            item.score = score;
            item.detail = details;
            item.isRecord = false;
            vm.listData = list;
            insertWordScore(vm.wordIndex, details);
            submiteOne(vm.wordIndex, local);
        }
        vm.isRecord = false;
    }

    // 提交单个题
    function submiteOne(index, path) {
        if(vm.typeCode == 52) {
            var _path = path+'';
        }
        var item = vm.listData[index];
        var url = 'question/compareAnswer';
        var params;
        if(vm.typeCode == 52) {
            params = {
                otherInfo: '',
                frontScore: item.score,
                answerStartTime: new Date().getTime(),
                fillAnswerStr: '',
                id: item.id
            };
        } else {
            params = {
                otherInfo: '',
                frontScore: '',
                answerStartTime: new Date().getTime(),
                fillAnswerStr: getFilleAnswer(item, index),
                id: item.id
            };
        }
        var callback = function(data) {
            var item = vm.listData[index];
            item.doStatus = data.judgeRight ? '1' : '2';
            if(vm.typeCode == 52) {
                saveFileById(data.answerRightOrErrorId, _path);
            }
            if(vm.wordIndex + 1 < vm.listData.length) {
                vm.mySwiper.slideNext();
            }
            if(isSubmiteQuestionList(vm.listData)) {
                fnOpenFrame({
                    name: 'submit_frm',
                    url: './submit_frm.html',
                    pageParam: {
                        winName: api.winName,
                        frameName: api.frameName
                    }
                });
            }else if(index == vm.listData.length -1) {
                var list = fnGetNotAnswerCountInList(vm.listData);
                fnOpenPublicWin('', 'video/end_tips', {count: list.length});
                isPlayAudio = false;
                vm.mySwiper.slideTo(list[0]);
            }
        };
        POST(url, params, callback);
    }

    // 播放动作
    // type 1 录音播放 2 原音播发
    function handlePlayWord(index, type) {
        var list = deepCopy(vm.listData),
            item = list[index];
        if(type == 1 && item.score === undefined) {
            fnToast('请先录音');
            return;
        }
        // 暂停
        // 暂停后 playIndex = -1，无法继续播放
        if(playIndex == index && item.playType == type) {
            Audio.pause();
            playIndex = -1;
            vm.isPlay = false;
        }else {
            playIndex = index;
            var src = type == 1 ? item.recordUrl : item.questionAudioUrl;
            Audio.setListAndPlay([{src: src}]);
            vm.isPlay = true;
        }
        item.playType = type;
        vm.listData = list;
    }

    // 音频播放事件回调
    function addAudioEvent() {
        var eventCallback = function(eventType, _playIndex) {
            if(eventType == 0) {
                // 一个音频播放结束
                vm.isPlay = false;
                playIndex = -1;
            }
        };
        var progressCallback = function(progress) {
            // 暂时不需要
        };
        Audio.addEvent(eventCallback, progressCallback);
    }

    function insertWordScore(index, list) {
        var box = $('.words-box-'+ index),
            item = vm.listData[index];
        var words = item.questionName.split(' ');
        var result = [];
        for(var i = 0; i< list.length; i ++) {
            result.push(oneWord(list[i], words[i]));
        }
        box.html('');
        result = result.join('&nbsp;');
        // result += '<img class="words-voice" src="../../image/course/detail_voice.png" alt="">';
        box.html(result);
    }

    // 以一个单词
    function oneWord(sender, char) {
        var one = '<span class="';
        var className = ' red';
        if(sender.score > vm.great) {
            className = ' green';
        }else if(sender.score > vm.notBad) {
            className = ' orange';
        }
        console.error(sender.score + '==' + className);
        one += className + '">';
        one += char +'</span>';
        if(!char) one = '';
        return one;
    }

    // 提交
    function handleSubmite() {
        var url = 'question/catalogOverAnswer';
        var params = {
            catalogId: pageParam.catalogId,
            questionTypeCode: pageParam.typeCode,
            durationTime: vm.time
        };
        var callback = function(data) {
            fnToast('提交成功');
            api.sendEvent({
                name: 'answerComplete'
            });
            fnOpenWin({
                name: 'answer_end',
                url: './answer_end.html',
                pageParam: {
                    score: data.Integral,
                    time: vm.time,
                    typeCode: vm.typeCode,
                    catalogId: vm.catalogId,
                    catalogName: pageParam.catalogName
                }
            });
            fnDelayCloseWin();
        };
        POST(url, params, callback);
    }

    // 确认提交回调
    function submitFrmCallback() {
        handleSubmite();
    }
</script>

</html>